<!-- 入退管理图表-->
<template>
  <div class="entry-exit-chart-container">
    <div
      id="entryExitChartContainer"
      ref="entryExitChartContainer"
      class="chart-container" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

// 注册ECharts组件
echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
]);

const entryExitChartContainer = ref<HTMLElement>();
let entryExitChart: echarts.ECharts;
let resizeObserver: ResizeObserver | null = null;
const handleWindowResize = () => {
  entryExitChart?.resize();
};

// 静态入退数据
const entryExitData = {
  months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  entryData: [45, 52, 38, 65, 48, 72, 58],
  exitData: [12, 18, 25, 15, 32, 28, 22],
};

// 图表配置
const getChartOption = () => {
  return {
    color: ["#0052D9", "#FF6B6B"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params: any) {
        let result = `${params[0].axisValue}<br/>`;
        params.forEach((item: any) => {
          result += `${item.marker}${item.seriesName}: ${item.value}人<br/>`;
        });
        return result;
      },
    },
    legend: {
      data: ["入住人数", "退住人数"],
      orient: "horizontal",
      top: "2%",
      right: "2%",
      itemGap: 12,
      textStyle: {
        color: "#666",
      },
    },
    grid: {
      left: "6%",
      right: "6%",
      bottom: "12%",
      top: "12%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: entryExitData.months,
      axisLabel: {
        color: "#666",
        interval: 0,
        hideOverlap: true,
        margin: 12,
      },
      axisLine: {
        lineStyle: {
          color: "#e6e6e6",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#666",
        formatter: function (value: number) {
          return value + "人";
        },
      },
      splitLine: {
        lineStyle: {
          color: "#f0f0f0",
        },
      },
    },
    series: [
      {
        name: "入住人数",
        type: "bar",
        barMaxWidth: 32,
        barMinWidth: 12,
        barCategoryGap: "30%",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
        },
        emphasis: {
          focus: "series",
        },
        data: entryExitData.entryData,
      },
      {
        name: "退住人数",
        type: "bar",
        barMaxWidth: 32,
        barMinWidth: 12,
        barCategoryGap: "30%",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
        },
        emphasis: {
          focus: "series",
        },
        data: entryExitData.exitData,
      },
    ],
  };
};

// 初始化图表
const initChart = () => {
  if (entryExitChartContainer.value) {
    entryExitChart = echarts.init(entryExitChartContainer.value);
    entryExitChart.setOption(getChartOption());

    // 监听窗口大小与容器尺寸变化（解决标签页切换后宽度为0导致柱宽过窄）
    window.addEventListener("resize", handleWindowResize);
    resizeObserver = new ResizeObserver(() => {
      entryExitChart?.resize();
    });
    resizeObserver.observe(entryExitChartContainer.value);
  }
};

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  if (entryExitChart) {
    entryExitChart.dispose();
  }
  window.removeEventListener("resize", handleWindowResize);
  if (resizeObserver) {
    resizeObserver.disconnect();
    resizeObserver = null;
  }
});
</script>

<style lang="less" scoped>
.entry-exit-chart-container {
  width: 100%;
  height: 100%;

  .chart-container {
    width: 100%;
    height: 260px;
    min-height: 260px;
  }
}
</style>
